<template>
    <div class="qilin-QilinView">
        <div class="header">基本使用</div>
        <QilinView v-model:viewConfig="viewConfig">
            <template v-slot:custom="slotData">
                <span>{{slotData.data.data}}内容随便写哦！</span>
            </template>
        </QilinView>
    </div>
</template>

<script setup>
import {reactive} from "vue";

/*
    数据变量定义区域
*/


/*
    计算属性等代码区域
*/


/*
    逻辑脚本代码区域
*/
const viewConfig=reactive({
    globalConfig:{
        isTable:true,
        labelBackgroundColor:"#FAFAFA",
        labelColor:"rgba(0,0,0,0.85)",
        valueColor:"rgba(0,0,0,0.65)"
    },
    headerConfig:{
        hideHeader:false,
        headerText:""
    },
    itemConfig:[
        {
            label:"姓名",
            value:"name",
            type:"text",
            col:8
        },
        {
            label:"简介",
            value:"description",
            type:"text",
            valueEllipsis:true,
            col:16
        },
        {
            label:"Qilin官网作者Qilin组件作者生平",
            value:"detail",
            type:"text",
            labelEllipsis:true,
            col:24
        },
        {
            label:"生辰",
            value:"birthday",
            type:"date",
            format:"chinese",
            col:12
        },
        {
            label:"Qilin官网",
            value:"qilinWeb",
            type:"link",
            valueStyle:"color:red !important;",
            click:(item,value)=>{
                console.log(item,value);
                window.open(value);
            },
            col:12
        },
        {
            label:"作者图片1",
            value:"imageArrayString",
            type:"image",
            isImageArrayString:true,
            imageFit:"fill",
            col:12
        },
        {
            label:"作者图片2",
            value:"imageArrayObj",
            type:"image",
            isImageArrayString:false,
            imageFit:"fill",
            col:12
        },
        {
            label:"作者图片3",
            value:"imageArrayObj2",
            type:"image",
            isImageArrayString:false,
            imageFit:"fill",
            imageOptions:{
                serverUrl:"name"
            },
            col:24
        },
        {
            label:"作者文档1",
            value:"fileArrayString",
            type:"file",
            isImageArrayString:true,
            click:(item,value)=>{
                console.log(item,value);
            },
            col:24
        },
        {
            label:"作者文档2",
            value:"fileArrayObj",
            type:"file",
            isImageArrayString:false,
            click:(item,value)=>{
                console.log(item,value);
            },
            col:24
        },
        {
            label:"作者文档3",
            value:"fileArrayObj2",
            type:"file",
            isImageArrayString:false,
            imageOptions:{
                serverOriginalName:"name"
            },
            click:(item,value)=>{
                console.log(item,value);
            },
            col:24
        },
        {
            label:"插槽",
            value:"custom",
            type:"slot",
            slotName:"custom",
            col:24
        },
        {
            label:"作者介绍",
            value:"detail",
            type:"text",
            textarea:true,
            rows:3,
            col:24
        }
    ],
    viewData:{
        name:"Qilin",
        description:"Qilin组件的创始者，前端插件的搬运工，Qilin工具库的封装者，Qilin官网的作者，尘世中一个迷途小前端~",
        detail:"Qilin组件的创始者，前端插件的搬运工，Qilin工具库的封装者，Qilin官网的作者，尘世中一个迷途小前端~",
        birthday:"1996-05-12",
        qilinWeb:"https://www.qilin-web.cn",
        imageArrayString:["https://www.qilin-web.cn/qilin/uploads/image_20230918151155.jpeg"],
        imageArrayObj:[
            {
                fileName:"https://www.qilin-web.cn/qilin/uploads/image_20230918151155.jpeg"
            }
        ],
        imageArrayObj2:[
            {
                name:"https://www.qilin-web.cn/qilin/uploads/image_20230918151155.jpeg"
            }
        ],
        fileArrayString:["dhadadjasdjafjak.doc","dhadadjasdjafjak1.doc"],
        fileArrayObj:[
            {
                originalFilename:"dhadadjasdjafjak.doc"
            }
        ],
        fileArrayObj2:[
            {
                name:"dhadadjasdjafjak.doc"
            }
        ],
        custom:"作者的自定义插槽~",
        detail:"Qilin组件的创始者，前端插件的搬运工，Qilin工具库的封装者，Qilin官网的作者，尘世中一个迷途小前端~"
    }
});


/*
    生命周期等代码区域
*/

</script>

<style scoped>
.qilin-QilinView{

}
</style>
